<template>
    <el-dialog
        v-dialogDrag
        :title="dialogType == 1 ? '新增' : '修改'"
        :close-on-click-modal="false"
        :visible.sync="visible"
        @close="handleClose"
        :center="true"
    >
        <el-form :model="addDataForm" :rules="dataRule" ref="addDataForm" @keyup.enter.native="addDataFormSubmit()" label-width="80px">
            <el-form-item label="角色名称" prop="rolename">
                <el-input v-model="addDataForm.rolename" placeholder="请输入角色名称"  clearable></el-input>
            </el-form-item>

            <el-form-item label="角色编码" prop="roleId">
                <el-input
                    v-model="addDataForm.roleId"
                    :disabled="dialogType == 2"
                    placeholder="请输入角色编码"
                    @blur="validateRoleId(addDataForm.roleId)"
                ></el-input>
            </el-form-item>

            <el-form-item label="角色类型">
                <el-select v-model="roleTypeName" placeholder="请选择" style="width: 100%" :disabled="typeSelectedDis" >
                    <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.rolename" :value="item.roleId"> </el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="角色描述">
                <el-input v-model="addDataForm.description" placeholder="请输入角色描述" type="textarea"  clearable></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取消</el-button>
            <el-button type="primary" @click="addDataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
export default {
    data() {
        return {
            roleTypeName: '',
            typeSelectedDis:false,
            typeOptions: [
                { roleId: 'biz', rolename: '业务', selected: true },
                { roleId: 'loan_flow', rolename: '助农审批', selected: false },
            ],

            visible: false,
            addDataForm: {
                rolename: '',
                roleId: '',
                roleType: '',
                description: ''
            },
            appId: '',
            dataRule: {
                rolename: [
                    {
                        required: true,
                        message: '角色名称不能为空',
                        trigger: 'blur'
                    }
                ],
                roleId: [
                    {
                        required: true,
                        message: '角色编码不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            isUser: false,
            dialogType: 1
        };
    },
    
    methods: {
        handleClose() {
            this.addDataForm = {
                rolename: '',
                roleId: '',
                roleType: '',
                description: ''
            };
            this.visible = false;
        },

        init(item, type) {
            this.visible = true;

            this.dialogType = type;
            if (item && type == 2) {
                this.addDataForm = item;

                //角色类型下拉处理 (编辑)
                switch (item.roleType) {
                    case 'admin':
                        this.roleTypeName="平台管理员";
                        this.typeSelectedDis=true;

                        break;

                    case 'biz':
                         this.typeSelectedDis=false;
                         this.disposeTypeShow('biz');
                        break;

                    case 'loan_flow':
                        this.typeSelectedDis=false;
                         this.disposeTypeShow('loan_flow');
                        break;
                }
            } else {

                //角色类型下拉处理 （新增）
                for (var i = 0; i < this.typeOptions.length; i++) {
                    //配置 下拉框默认选中
                    if (this.typeOptions[i].selected) {
                        this.addDataForm.roleType = this.typeOptions[i].roleId;
                        this.roleTypeName = this.typeOptions[i].rolename;
                    }
                }
            }
        },
        disposeTypeShow(name) {

            for (var i = 0; i < this.typeOptions.length; i++) {

                //配置 下拉框默认选中
                if (this.typeOptions[i].roleId === name) {
                    this.addDataForm.roleType = this.typeOptions[i].roleId;
                    this.roleTypeName = this.typeOptions[i].rolename;
                    this.typeOptions[i].selected = true;
                } else {
                    this.typeOptions[i].selected = false;
                }
            }
        },
        getType(name) {

            //选择之后，name为代码id 
            for (var i = 0; i < this.typeOptions.length; i++) {
                
                if (this.typeOptions[i].roleId === name) {
                    this.addDataForm.roleType = this.typeOptions[i].roleId;
                    return this.typeOptions[i].roleId;
                }
            }
        },
        validateRoleId(id) {
            API.role.validateRoleCode({ roleId: id }).then((res) => {
                console.log(res);
                if (res.code == '0000') {
                    this.isUser = res.result;
                    if (res.result) {
                        this.$message.error('该角色编码已使用，请重新输入');
                    }
                }
            });
        },

        // 表单提交
        addDataFormSubmit() {
            this.$refs['addDataForm'].validate((valid) => {
                if (valid) {
                    if (this.isUser) {
                        this.$message.error('该角色编码已使用，请重新输入');
                        return;
                    }
                    let params = cloneDeep(this.addDataForm);
                    params.roleType=this.getType(this.roleTypeName);//处理选中之后，type的值
              
                    var tick = this.dialogType == 1 ? API.role.addRole(params) : API.role.editRole(params);
                    tick.then((data) => {
                        if (data.code == '0000') {
                            this.$message({
                                message: `${this.dialogType == 2 ? '修改成功' : '新增成功'}`,
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit('refreshDataList');
                                }
                            });
                        }
                    });
                }
            });
        }
    }
};
</script>